<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../favicon.ico">

    <title>兑奖信息填写</title>

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
    <link rel="stylesheet" href="../../../../assets/css/demos.css">

    <style type="text/css">
        .top-banner {
            /*		    width: 100%;
		    padding-bottom: 50%;
		    background-repeat: no-repeat;
		    background-position: center;*/
            background-image: url(../../../../assets/image/cards/card-prize-national.jpg);
            /*		    background-size: cover;
		    border: 1px solid #EFEFF4;*/
        }
    </style>
</head>

<body>

    <div class="page-group">
        <div class="page page-current">
            <div class="content native scroll pull-up">
                <div class="top-banner hideWhenSubmit"></div>

                <!-- 表单_个人信息部分 -->
                <div class="list-block" style="margin-top: 0rem;">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">姓名*</div>
                                    <div class="item-input">
                                        <input id="customer_name" class="required" type="text" placeholder="请填写您的姓名">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-smartphone"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">手机号码*</div>
                                    <div class="item-input">
                                        <input id="mobile_number" class="required" type="tel" placeholder="请输入11位有效的手机号">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- END-表单_个人信息部分 -->

                <!-- 表单_产品信息部分 -->
                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">购买日期*</div>
                                    <div class="item-input">
                                        <input id="purchasing_date" class="required" type="text" placeholder="请填写购买日期" readonly />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-model"></i></div>
                                <div class="item-inner">
                                    <div class="item-title input-label label">产品型号*</div>
                                    <div class="item-input">
                                        <input id="product_model" class="required" type="text" placeholder="请输入购买产品型号" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content hideWhenSubmit">
                                <div class="item-media"><i class="icon icon-form-store"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">门店编号</div>
                                    <div class="item-input">
                                        <input id="store_name" type="text" placeholder="如了解门店编号，可在此输入号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--  END-表单_产品信息部分 -->

                <!-- 表单_发票部分 -->
                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-invoice-amount"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">发票金额*</div>
                                    <div class="item-input">
                                        <input id="invoice_price" class="required" type="number" placeholder="请输入发票上的发票金额（单位：元）">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-invoice-number"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">发票号码*</div>
                                    <div class="item-input">
                                        <input id="invoice_number" class="required" type="text" placeholder="请输入发票上的发票号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content hideWhenSubmit">
                                <div class="item-media"><i class="icon icon-form-invoice-file"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">上传发票*</div>
                                    <div class="item-input">
                                        <input id="invoice_bytes" class="file_upload" type="file">
                                        <input class="file_upload_cover required" type="text" placeholder="请点击上传发票照片" readonly>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content hideWhenSubmit">
                                <div class="item-media"><i class="icon icon-form-invoice-remark"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">备注</div>
                                    <div class="item-input">
                                        <input id="invoice_remark" type="text" placeholder="如有补充信息,您可以填写这里"></input>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- END-表单_发票部分 -->

                <!-- 表单_地址部分 -->
                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <!-- 省市区 -->
                                <div class="item-media"><i class="icon icon-form-address-major"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">收件地址*</div>
                                    <div class="item-input">
                                        <input id="address_major_part" class="required" type="text" placeholder="请填写收件地址">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <!-- 详细地址 -->
                                <div class="item-media"><i class="icon icon-form-address-minor"></i></div>
                                <div class="item-inner">
                                    <div class="item-title  input-label label">街道地址*</div>
                                    <div class="item-input">
                                        <input id="address_minor_part" class="required" type="text" placeholder="请填写街道、门牌号码">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- END-表单_地址部分 -->


                <!-- 表单底部 -->
                <div class="content-block hideWhenSubmit" style="margin-bottom:0.2rem;">
                    <div class="row">
                        <div class="col-60">
                            <input type="checkbox" checked="checked" class="checkbox_style">
                            <span style="padding-left: 12px;">
							<a href="#" class="open-about">已阅读条款及细则</a>
						</span>
                        </div>
                        <div class="col-40" style="color:red;text-align: right"><span>备注：*为必填项</span></div>
                    </div>
                    <p></p>
                    <div class="row" style="margin-top: 1.5rem;margin-bottom: 1.5rem;">
                        <div class="col-50"><a href="#" class="button button-big button-fill button-danger" id="cancel-button">取消</a></div>
                        <div class="col-50"><a href="#" class="button button-big button-fill button-success create-actions" id="submit-button">提交</a></div>
                    </div>

                    <p style="font-size: 12px;">
                        </span>如遇到任何问题或疑问，请保留此截图并提交给松下生活沙龙官方微信</p>
                </div>
                <!-- END-表单底部 -->
            </div>
        </div>


        <div class="modal-overlay" style="background: rgba(0,0,0,.8)"></div>

        <div class="popup popup-about">
            <div class="content-block">
                <div id="close-button"><a href="#" class="close-popup">关闭</a></div>
                <h3 style="text-align:center">活动参与方式与规则</h3>
                <h4>参与方式：</h4>
                <p>进入活动页面，填写相关信息，上传发票凭证照片。即可参加活动。</p>

                <h4>活动时间：</h4>
                <p>2017年9月29日-2017年10月8日</p>

                <h4>上传信息时间：</h4>
                <p>2017年9月29日-2017年10月22日（10月22日以后上传信息通道将关闭）</p>

                <h4>一.满额买赠活动</h4>
                <h5>礼品说明：</h5>
                <table style="width: 100%; text-align: center;">
                    <tr>
                        <th style="width: 40%;">单张发票金额</th>
                        <th>礼品</th>
                    </tr>
                    <tr>
                        <td>1000-1999元</td>
                        <td>松下电吹风EH-NE52</td>
                    </tr>
                    <tr>
                        <td>2000-2999元</td>
                        <td>松下剃须刀ES-SL33</td>
                    </tr>
                    <tr>
                        <td>3000-4999元</td>
                        <td>松下冲牙器EW-DJ40</td>
                    </tr>
                    <tr>
                        <td>5000元及以上</td>
                        <td>松下电吹风EH-NA61</td>
                    </tr>
                </table>
                <p>所有礼品颜色随机发送</p>

                <h5>奖品配送方式：</h5>
                <p>根据用户参与该活动时留存一致的姓名，电话号码，地址发送礼品。配送礼品的快递公司由松下指定。</p>

                <h5>奖品配送时间：</h45>
                    <p>顾客上传信息经过工作人员审核通过后的15个工作日内发出。</p>


                    <h4>二.微信抽奖活动</h4>

                    <p>根据提示参加完满额买赠活动即自动进入微信抽奖页面，中奖结果以页面实时显示的中奖结果为准。</p>
                    <p>单张发票仅能参与一次抽奖活动，如多次参与则以第一次抽奖结果为准。</p>

                    <h5>奖品配送方式：</h5>
                    <p>根据用户参与满额买赠活动时留存一致的姓名，电话号码，地址发送礼品。配送礼品的快递公司由松下指定。</p>

                    <h5>奖品配送时间：</h5>
                    <p>顾客上传信息经过工作人员审核无误后的15个工作日内发出。</p>





                    <h4>三.购物赢日本北海道5日游活动</h4>
                    <p>通过微信平台参加满额买赠活动，并经审核通过的顾客即可自动获得抽奖机会。中奖名单将通过后台数据随机抽取，总共10名中奖者的名单会于10月30日前在“松下电器生活沙龙”官方微信公布。</p>
                    <p>日本游行程由松下电器和携程旅行共同指定，奖品将以价值4999元的旅游代金券的形式发送，不得抵换现金或其它形式的奖励。携程旅行会在中奖名单公布后的5个工作日内与中奖者联系确认旅游行程，中奖者签证需自行办理。</p>



                    <h4>活动须知：</h4>
                    <ol style="padding-left: 1rem; font-size: 12px;">
                        <li>凡参与本活动，均视为已阅读并同意本活动细则。</li>
                        <li>所有奖品金额均符合『中华人民共和国反不正当竞争法』中相关规定。</li>
                        <li>参与活动者在领取、使用礼品过程中发生任何之伤害与损失，该等伤害非因主办方过失导致，主办方不承担任何责任。</li>
                        <li>若发现有用户利用不正当手段参与活动，活动主办方有权在事先通知的前提下，取消其活动资格。</li>
                        <li>活动主办方不为个人之网络问题而导致参与活动者之权益损失承担任何责任。</li>
                        <li>参与活动者提供收件地址信息有误、联系方式有误、提供虚假凭证、逾期兑奖等情形，皆视为参与者放弃领奖资格与由此引申权利。</li>
                        <li>本活动网站仅为用户提供网络互动式平台体验服务，用户不得利用本网站发布侮辱与攻击性言语、不得侵犯他人隐私、不得发布任何违法内容，任何由用户发布、参与互动内容、及传播结果而来的法律责任，由用户自行承担。</li>
                        <li>本次活动的最终解释权归松下电器（中国）有限公司上海分公司所有。如对活动有任何疑问，请联系松下电器生活沙龙官方微信。</li>
                    </ol>
                    <p></p>
            </div>
        </div>
    </div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
    <!-- <script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script> -->
    <script type="text/javascript" src="../../../../assets/js/sm-city-picker.v2.js" charset="utf-8"></script>
    <script src="../../../../assets/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8" async defer></script>

    <script src="../../../../assets/js/Zepto-Cookie/zepto.cookie.js" type="text/javascript" charset="utf-8" async defer></script>

    <script>
        // 当发票点击上传后，修改上传区域的文案
        document.getElementById('invoice_bytes').onchange = function() {
            console.log('Selected file: ' + this.value);

            var fakeName = this.value;
            var index = fakeName.lastIndexOf("\\");
            var fileName = fakeName.substring(index + 1);

            var node = $(".file_upload_cover");
            // node.attr("placeholder", fileName);
            node.val(fileName);
        };

        document.getElementById('mobile_number').addEventListener('input', function(e) {
            var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,4})(\d{0,4})/);
            e.target.value = !x[2] ? x[1] : '' + x[1] + '-' + x[2] + (x[3] ? '-' + x[3] : '');
        });

        // 定制日历的时间范围
        $("#purchasing_date").calendar({
            minDate: ['2016-09-27'],
            maxDate: ['2016-10-07']
        });

        $.init();


        // 定制省市区选择器的样式
        $("#address_major_part").cityPicker({
            toolbarTemplate: '<header class="bar bar-nav">\
							    <button class="button button-link pull-right close-picker">确定</button>\
							    <h1 class="title">请选择省市区</h1>\
					      </header>'
        });


        // 打开活动规则浮层
        $(document).on('click', '.open-about', function() {
            $.popup('.popup-about');
        });


        // 表单提交的控制逻辑
        $("#cancel-button").click(function() {
            // parent.history.back();

            window.location = "../../../portal.html";
            return false;
        });


        $("#submit-button").click(function() {
            // 1、校验表单的各个输入框
            var is_complete = true;
            $("input.required").each(function(index, element) {

                if (element.value.length == 0) {
                    $.alert(element.placeholder);
                    is_complete = false;
                    return false;
                }
            });

            if (!is_complete) {
                return false;
            }

            if (!$("input[type=checkbox]").is(':checked')) {
                $.alert('请勾选已阅读条款及细则');
                return;
            }

            // 3、提交表单到后端
            var formData = new FormData();
            $("input[type=text],[type=tel],[type=number]").each(function(index, element) {
                console.log(element.id + "\t" + element.value);
                formData.append(element.id, element.value);
            });

            formData.append("invoice_bytes", $("#invoice_bytes")[0].files[0]);

            $.ajax({
                url: '/pana-BE-RESTful/upload',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $.showPreloader("提交中……");
                },
                success: function(data) {
                    $.hidePreloader();
                    console.log(data);

                    if (data == "DUPLICATE_MP_NUMBER") {
                        $.alert('该手机号已参加活动');
                        return false;
                    }


                    // $.toast('', 5345);
                    $.alert('提交已成功！', function() {
                        window.location = "/pana-campaigns/pages/campaigns/prize-cashing/2016-10-01/lottery.html?uuid=" + data;
                        // return false;
                    });
                },
                error: function() {
                    $.hidePreloader();
                    $.alert("系统繁忙，请稍后提交");
                },
                complete: function() {

                }
            });
        });
    </script>


</body>

</html>